{% extends 'panel/base.html' %}

{% block css %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/morris.css') }}">
{% endblock %}

{% block content %}
<div class="dashboard-ecommerce">
    <div class="container-fluid dashboard-content ">
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="page-header">
                    <h2 class="pageheader-title">管理首页 </h2>
                    <hr>
                </div>
            </div>
        </div>
        <div class="ecommerce-widget">
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
                    <div class="card">
                        <h5 class="card-header">系统信息 </h5>
                        <div class="card-body">
                            <p class="card-text">系统版本：{{ base_data[0] }}{{ base_data[2] }}</p>
                            <p class="card-text">系统位数：{{ base_data[7] }}</p>
                            <p class="card-text">处理器：{{ base_data[5] }}</p>
                            <p class="card-text">Python版本：{{ base_data[6] }}</p>
                            <p class="card-text">Flask版本：{{ base_data[8] }}</p>
                            <p class="card-text">FancyPanel版本：0.1</p>
                            <p class="card-text">描述：一键安装并管理树莓派软件，完全web端管理。</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
                    <div class="card">
                        <h5 class="card-header">CPU </h5>
                        <div class="card-body">
                            <div id="cpu"></div>
                            <h3 class="text-center" id="cpu-used">loading</h3>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
                    <div class="card">
                        <h5 class="card-header">内存 </h5>
                        <div class="card-body">
                            <div id="memory"></div>
                            <h3 class="text-center" id="memory-used">loading</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
    <script src="{{ url_for('static', filename='js/morris.js') }}"></script>
    <script src="{{ url_for('static', filename='js/raphael.min.js') }}"></script>
    <script>var instantRefresh=setInterval(getSystemInformation, 1000)</script>
{% endblock %}
